<template>
	<swiper class="swiper-guide" :current="currentTab" @change="changTab" @touchstart="start">
		<swiper-item>
			<view class="swiper-item">
				<scroll-view scroll-y="true">
					<view class="swiper-guide">
						<image class="swiper-guide" src="../../static/image/guide/start.png" mode=""></image>
						<image src="../../static/image/guide/end.png" id="end" mode=""></image>
						<view class="text-end">
							祥瑞·理财小助手
						</view>
					</view>
				</scroll-view>
			</view>
		</swiper-item>

		<template v-if="isBool">
			<swiper-item v-for="item in imgSrc" :key="item.id">
				<view class="text">
					<text class="skip" @click="navigator">跳过</text>
				</view>
				<view class="swiper-item">
					<scroll-view scroll-y="true">
						<view class="swiper-guide guide-view">
							<view class="view">
								<image :src="item.src" class="guide-image" mode=""></image>
							</view>
							<view class="">
								<view class="text-img">
									<text class="font1">{{item.text}}</text><text class="font2">{{item.text2}}</text>
								</view>
								<image :src="item.bottomSrc" class="guide-image-bottom" mode=""></image>
								<view class="text-line">
									<template v-for="itm in circle">
										<view :key="itm.id" :class="[itm._id == currentTab?'line':'circle']"></view>
									</template>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
		</template>

	</swiper>
</template>

<script>
	export default {
		data() {
			return {
				isBool: false,
				imgSrc: [{
						id: 0,
						src: '../../static/image/guide/center.png',
						bottomSrc: "../../static/image/guide/bottom.png",
						text: '股市、基金',
						text2: "随时看"
					},
					{
						id: 1,
						src: '../../static/image/guide/center2.png',
						bottomSrc: "../../static/image/guide/bottom.png",
						text: '资金盈利',
						text2: "秒到账"
					},
					{
						id: 2,
						src: '../../static/image/guide/center3.png',
						bottomSrc: "../../static/image/guide/bottom.png",
						text: '贷款借钱',
						text2: "低利息"
					},
				],
				currentTab: 0,
				circle: [{
						_id: 1,
						line: "line",
						circle: 'circle'
					},
					{
						_id: 2,
						line: "line",
						circle: 'circle'
					},
					{
						_id: 3,
						line: "line",
						circle: 'circle'
					},
				]
			}
		},
		mounted() {

			const token = uni.getStorage({
				key: "token",
				success: res => {
					this.isBool = false;
				},
				fail: err => {
					this.isBool = true;
				}
			})
		},
		methods: {
			changTab(e) {
				this.currentTab = e.detail.current;
			},
			start(){
				if(this.currentTab+1 == 4){
					if (this.isBool) {
						uni.switchTab({
							url: '/pages/index/index',
							success(res) {
								// console.log(res)
							},
							fail(err) {
								// console.log(err)
							}
						})
					}
				}
			},
			navigator(){
				uni.switchTab({
					url: '/pages/index/index',
				})
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.swiper-guide {
		height: 100vh;
		width: 750rpx;
	}

	.guide-image {
		width: 668rpx;
		height: 578rpx;
		margin-top: -5rpx;
	}

	.guide-view {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}

	.guide-image-bottom {
		width: 750rpx;
		height: 627rpx;
		margin-top: 20rpx;
	}

	.view {
		margin: 0 auto;
	}

	.text {
		text-align: right;
		margin-top: 50rpx;
		margin-right: 35rpx;
	}

	.skip {
		width: 100rpx;
		height: 48rpx;
		border: 1px solid #F8F8F8;
		display: inline-block;
		text-align: center;
		font-size: 24rpx;
		line-height: 48rpx;
		border-radius: 40%;
	}

	.text-img {
		position: absolute;
		bottom: 269rpx;
		left: 242rpx;
		color: #FFFFFF;
	}

	.font1 {
		font-size: 32rpx;
		letter-spacing: 3rpx
	}

	.font2 {
		font-size: 44rpx;
		letter-spacing: 2px
	}

	.line {
		width: 44rpx;
		height: 16rpx;
		color: #FFFFFF;
		border-radius: 28%;
		background-color: #FFFFFF;
	}

	.circle {
		width: 16rpx;
		height: 16rox;
		border-radius: 50%;
		background-color: #FFFFFF;
	}

	.text-line {
		position: absolute;
		bottom: 214rpx;
		/* border: 1px solid red; */
		left: 317rpx;
		display: flex;
		width: 150rpx;
		justify-content: space-evenly;
	}
	#end{
		width: 88rpx;
		height: 87rpx;
		position: absolute;
		bottom: 151rpx;
		left: 330rpx;
		z-index: 2;
	}
	.text-end{
		font-size: 27rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 100rpx;
		left: 280rpx;
		letter-spacing: 3rpx;
	}
</style>
